<div id="hot_maps" v-cloak>
    <row>
        <i-col span="24">
            <div style="position:absolute;z-index: 10;">
                <ul class="ivu-timeline" id="month-line"> </ul>
            </div>

            <div style="position:absolute;z-index: 10;left: 20%;display: flex;padding: 5px;border-radius: 10% 10%;background-color: #e2b5637a;">
                <i-select v-model="type" multiple style="width:200px">
                    <i-option v-for="item in types" :value="item.value" :key="item.value" @on-change="checkType">{{
                        item.name }}</i-option>
                </i-select>

                <div v-show="clustering"> 
                    <span style="font-size: 15px;line-height: 32px;margin-left: 20px;">聚类中心数:</span>
                    <i-select v-model="cluNum" style="width:50px">
                        <i-option v-for="item in cluNums" :value="item.value" :key="item.value">{{
                            item.value }}</i-option>
                    </i-select>
                </div>
                <span style="font-size: 15px;line-height: 32px;margin-left: 10px;">热力图种类:</span>
                <i-select v-model="dataType" style="width:100px">
                    <i-option v-for="item in dataTypes" :value="item.value" :key="item.value">{{
                        item.name }}</i-option>
                </i-select>
                <date-picker type="daterange" placement="bottom-end" split-panels placeholder="选择日期" style="width: 200px; "
                    @on-change="customData"></date-picker>
                <i-button type="primary" ghost @click="cleanMap" style="margin-left: 15px;">清除图层</i-button>
                <div v-show="display">
                    <i-button id="keepStop" style="display: block;" v-show="btnDis" @click="stopMaps">{{stopMap}}</i-button>
                </div>
                <div class="time-line" v-show="display">
                    <span style="font-size: 15px;line-height: 32px;margin-left: 20px;">选择区间:</span>
                    <i-select v-model="yearList" multiple style="width:100px">
                        <i-option v-for="item in year" :value="item.value" :key="item.value" @on-change="checkData">{{
                            item.value }}年</i-option>
                    </i-select>
                    <i-select v-model="monthList" style="width:100px" @on-change="checkData">
                        <i-option v-for="item in month" :value="item.value" :key="item.value">间隔{{ item.value }}个月</i-option>
                    </i-select>
                </div>
            </div>

        </i-col>
    </row>
    <div id="hotmaps"></div>
</div>
<style>
    #hotmaps {
        height: 100vh;
    }
    #month-line{
        left:0;
        margin-top: 10px;
        margin-left: 10px;
        color:#fff
    }
</style>
<script type="text/javascript" src="JS/page/logistics/hot_maps.js"></script>